<template>
	<view class="">
		<view class="nav"></view>
		<view class="pa0 w100">
			<view class="" :style="{height: `${navh}px`}"></view>
			<view class="cont plr22">
				<view class="flex_btw">
					<view class="flex_x">
						<image src="../../static/my/map.png" mode="" class="icon_1 mr5"></image>
						<view class="fs30 c3 fw550">
							南宁
						</view>
					</view>
					<view class="flex_x">
						<image src="../../static/my/set.png" mode="" class="icon_2 mr16"></image>
						<image src="../../static/my/pu.png" mode="" class="icon_3 mr16"></image>
						<image src="../../static/my/xx.png" mode="" class="icon_4 mr16"></image>
						<image src="../../static/my/gd.png" mode="" class="icon_5"></image>
					</view>
				</view>
				<view class="mt74 flex mb36">
					<view class="mr30">
						<image src="" class="img120 br50 bgf9"></image>
					</view>
					<view class="">
						<view class="flex_x mb12">
							<view class="fs24 mr12 fw550">
								*名
							</view>
							<view class="br6 flex_c ccc">
								<text class="mr6">个人资料</text>
								<image src="../../static/my/right_1.png" class="icon_6" mode=""></image>
							</view>
						</view>
						<view class="pl30 pr mb12">
							<view class="pa icon_7">
								<image src="../../static/my/xz.png" mode=""></image>
							</view>
							<view class="br6 flex_c cce pr10">
								<text class="mr6">绿色勋章LV1</text>
								<image src="../../static/my/right_2.png" class="icon_6" mode=""></image>
							</view>
						</view>
						<view class="fs18 c74 mb12">
							132****8855
						</view>
						<view class="fs18 c74">
							上次登录2023-12-2120:43:53
						</view>
					</view>

				</view>
				<view class="bgf br18 pt40 pb40 pl28 pr28 box_shadow">
					<view class="flex_x w100">
						<view class="flex_col_c flex1" v-for="item in cardList" :key="item.label">
							<view class="fs22 mb10">
								{{item.label}}
							</view>
							<view class="fs30 bold">
								{{item.value}}
							</view>
						</view>
					</view>
					<view class="mt30 star_user fs24 cf flex_btw">
						<view class="fw550">
							六星客户
						</view>
						<view class="qyzx flex_c">
							权益中心
						</view>
					</view>
				</view>
				<view class="box_shadow bgf mt40 br18 menu1 ">
					<view class="flex_wrap flex1">
						<view class="flex_col_c flex20" v-for="item in menuList1" :key="item.image">
							<image class="" :style="[item.imgSty]" :src="item.image"></image>

							<view class="mt25 fs26 mt22">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="mtb30 flex_btw fs20 c6">
					<view class="flex_x">
						<view class="mr14">
							时间：2023-12-20 10:26:53
						</view>
						<u-icon name="reload" color="#3E71CD" size="14"></u-icon>
					</view>
					<view class="flex_x">
						<view class="">
							数据仅供参考
						</view>
						<image src="../../static/my/info.png" mode="" class="ml16 img24"></image>
					</view>
				</view>
				<view class="box_shadow p3024 br18">
					<view class="flex_btw">
						<view class="flex_x">
							<view class="fs34 fw550 mr26">
								我的资产负债
							</view>
							<view class="br6 flex_c cc5">
								<text class="mr6">详情</text>
								<image src="../../static/my/right_3.png" class="icon_6" mode=""></image>
							</view>
						</view>
						<view class="">
							<image src="../../static/my/eye.png" mode="" class=" icon_8"></image>
						</view>
					</view>
					<view class="bgf5 br8 mt40 flex_btw  fs28 pt36 pb36 pr20 fw550">
						<view class="flex_x">
							<view class="before_line bgff4">

							</view>
							<view class="">
								总资产（元）
							</view>
						</view>
						<view class="">
							12314654.00
						</view>
					</view>
					<view class="bgf5 br8 mt40 flex_btw  fs28 pt36 pb36 pr20 fw550">
						<view class="flex_x">
							<view class="before_line bg27a">

							</view>
							<view class="">
								总负债（元）
							</view>
						</view>
						<view class="">
							12314654.00
						</view>
					</view>
				</view>
				<view class="box_shadow br18 p3024 mt30">
					<view class="flex_btw">
						<view class="flex_x">
							<view class="fw550 fs34 mr14">
								收支报告
							</view>
							<image src="../../static/my/info.png" mode="" class="img24"></image>
						</view>
						<image src="../../static/my/top.png" class="icon_9" mode=""></image>
					</view>
					<view class="mt26 flex_btw fs18">
						<view class="">
							本月收入（元）
							<image src="../../static/my/yj.png" class="icon_10 ml20" mode=""></image>
						</view>
						<view class="">
							本月支出（元）
						</view>
					</view>
					<view class="mt20 flex_btw fs24 fw550">
						<view class="">
							****
						</view>
						<view class="">
							****
						</view>
					</view>
				</view>
				<view class="box_shadow br18 p3024 mt30">
					<view class="flex_btw">
						<view class="flex_x">
							<view class="fw550 fs34 mr14">
								安全中心
							</view>
							<view class="flex_x">
								<image src="../../static/my/safe.png" mode="" class="incn_11"></image>
								<view class="fs26 c5f ml8">
									实时保护中
								</view>
							</view>
						</view>
						<view class="fs22 c6 ">
							更多
						</view>
					</view>
					<view class="flex_btw mt30">
						<view class="flex1 img282 br18 pr">
							<view class="br30 bgf pa fs26 flex_c safe_txt">
								安全检测
							</view>
						</view>
						<view class="flex_wrap flex1">
							<view class="flex_col_c flex50" v-for="item in menuList2" :key="item.image">
								<image class="" :style="[item.imgSty]" :src="item.image"></image>

								<view class="mt25 fs26 mt22">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="">
			<tabbar :value="5"></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		cardList,
		menuList1,
		menuList2
	} from './data.js'
	export default {
		data() {
			return {
				cardList,
				menuList1,
				menuList2
			}
		},
		onLoad() {
		},
		onShow() {

		},
		methods: {

		},
		computed: {

		},
		watch: {

		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.nav {
		height: 700upx;
		background-image: linear-gradient(to bottom, #FFE3E0, #fff);
	}

	.cont {
		padding-bottom: calc(140upx + env(safe-area-inset-bottom));
	}

	.icon_1 {
		width: 29rpx;
		height: 35rpx;
	}

	.icon_2 {
		width: 31rpx;
		height: 31rpx;
	}

	.icon_3 {
		width: 34rpx;
		height: 30rpx;
	}

	.icon_4 {
		width: 26rpx;
		height: 29rpx;
	}

	.icon_5 {
		width: 22rpx;
		height: 21rpx;
	}

	.icon_6 {
		width: 8rpx;
		height: 15rpx;
	}

	.icon_7 {
		left: 0;
		bottom: -4rpx;
		width: 36rpx;
		height: 41rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.icon_8 {
		width: 42rpx;
		height: 29rpx;
	}

	.icon_9 {
		width: 21rpx;
		height: 11rpx;
	}

	.icon_10 {
		width: 27rpx;
		height: 11rpx;
	}
	.incn_11{
		width: 31rpx;
		height: 33rpx;
	}
	.c74 {
		color: #764803;
	}

	.cce {
		color: #237D04;
		background-color: #CEE8C5;
		font-size: 16rpx;
		width: 114rpx;
		height: 32rpx;
	}

	.ccc {
		color: #CC7E0A;
		background-color: #FFDAA3;
		font-size: 16rpx;
		padding: 6rpx 12rpx 6rpx 9rpx;
	}

	.cc5 {
		background-color: #C5DAFF;
		color: #3E71CD;
		font-size: 22rpx;
		padding: 6rpx 12rpx;
	}

	.fs18 {
		font-size: 18rpx;
	}

	.star_user {
		height: 91rpx;
		background: url('../../static/my/qy_bg.png') no-repeat;
		background-size: cover;
		padding-left: 106rpx;
		padding-right: 25rpx;
	}

	.box_shadow {
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.qyzx {
		width: 150rpx;
		height: 50rpx;
		border: 2rpx solid #F6F6F6;
		border-radius: 25rpx;
	}

	.menu1 {
		padding: 40rpx 10rpx;
	}

	.flex20 {
		flex: 0 0 20%;
		height: 50%;
		margin-bottom: 50rpx;
	}

	.flex50 {
		flex: 0 0 50%;
		height: 141rpx;
	}

	.img282 {
		height: 282rpx;
		background: url('../../static/my/bg1.png') no-repeat;
		background-size: cover;
	}

	.before_line {
		width: 9rpx;
		height: 20rpx;
		margin-right: 9rpx;
	}
	.c5f{
		color: #5FB8A1;
	}
	.safe_txt {
		bottom: 40rpx;
		left: 83rpx;
		color: #3E71CD;
		width: 155rpx;
		height: 62rpx
	}
</style>